<template>
    <div class="kanban">
        <el-form :model="form" class="app-search" ref="searchForm">
            <el-select class="app-search-item" clearable filterable placeholder="商户" size="medium"
                       style="width:200px;" v-model="form.merchantId"
            >
                <el-option :label="item.name" :value="item.id" v-for="item in merchants"/>
            </el-select>
            <el-select class="app-search-item" clearable filterable placeholder="请选择商品类目" size="medium"
                       style="width:200px;" v-model="form.category"
            >
                <el-option :label="item.name" :value="item.id" v-for="item in categories"/>
            </el-select>
            <el-input class="app-search-item" clearable placeholder="请输入商品名称查询" size="medium"
                      style="width:220px;"
                      v-model="form.name"
            />
            <el-button @click="fetchData(1)" class="app-search-item" icon="el-icon-search" size="medium"
                       type="primary"
            >
                搜索
            </el-button>
        </el-form>
        <el-table :data="items" style="width: 100%">
            <el-table-column label="商品" prop="goodsName">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.goodsName}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商户" prop="merchantName">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.merchantName}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="规格" prop="spec">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.spec}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="类别" prop="categoryName">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.categoryName}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="已售" prop="sold">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.sold}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="已租" prop="rented">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.rented}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" class-name="status-col" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button @click="openDetailDialog(scope.row)" size="mini" type="warning">详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-size="form.size" :total="form.total" @current-change="fetchData"
                           layout="prev, pager, next"
                           width="1000">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="detailDialogShow" width="800px">
            <el-descriptions :column="2" :title="detailDialogTitle" border>
                <el-descriptions-item label="是否可退换">{{ detailDialogData.exchangable ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item label="是否下架">{{ detailDialogData.isDisabled ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item label="库存">{{ detailDialogData.stock }}
                </el-descriptions-item>
                <el-descriptions-item label="租金-周">{{ detailDialogData.priceForWeek | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="租金-月">{{ detailDialogData.priceForWeek | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="租金-年">{{ detailDialogData.priceForWeek | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="押金">{{ detailDialogData.deposit | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="运费">{{ detailDialogData.logisticsFee | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="零售价">{{ detailDialogData.price | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="批发价">{{ detailDialogData.wholeSalePrice | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="配送价">{{ detailDialogData.deliveryPrice | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="VIP价">{{ detailDialogData.vipPrice | yuan }} 元
                </el-descriptions-item>
                <el-descriptions-item label="商品图片">
                    <el-image :preview-src-list="[detailDialogData.pictureOssPath]"
                              :src="detailDialogData.pictureOssPath"
                              class="el-image-viewer__img"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="商品描述">{{ detailDialogData.description }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'Goods',
        info: {},
        data() {
            return {
                form: {
                    page: 1,
                    size: 10,
                    total: 0,
                    merchantId: '',
                    name: '',
                    category: ''
                },
                items: [],
                editDialogData: {
                    id: '',
                    name: '',
                    description: '',
                    visible: false,
                    title: '编辑商品类目',
                },
                editRules: {
                    name: [{required: true, message: '此项不能为空', trigger: 'blur'}],
                    description: [{required: true, message: '此项不能为空', trigger: 'blur'}]
                },
                detailDialogTitle: '',
                detailDialogShow: false,
                detailDialogData: {},
                merchants: [],
                categories: []
            }
        },
        methods: {
            fetchMerchants() {
                this.$fetch('/admin/merchant/list?page=1&size=9999').then(res => {
                    if (res.code === 0) {
                        this.merchants = res.data.records
                    } else {
                        this.$message.error(res.errorMsg)
                    }
                })
            },
            fetchCategories() {
                this.$fetch('/goodsCategories?page=1&size=9999').then(res => {
                    if (res.code === 0) {
                        this.categories = res.data.records
                    } else {
                        this.$message.error(res.errorMsg)
                    }
                })
            },
            fetchData(page) {
                if (page) {
                    this.form.page = page
                }
                this.$fetch('/admin/goods/list?page=' + this.form.page + '&merchantId=' + this.form.merchantId + '&name=' + this.form.name + '&category=' + this.form.category)
                    .then(res => {
                        if (res.code === 0) {
                            this.items = res.data.records
                        } else {
                            this.$message.error(res.errorMsg)
                        }
                    })
            },
            openDetailDialog(data) {
                this.detailDialogData = data;
                this.detailDialogShow = true;
            },
        },
        mounted() {
            this.fetchCategories();
            this.fetchMerchants();
            this.fetchData()
        }
    }
</script>
<style>
    .block {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        padding: 15px 30px;
    }

    .kanban {
        padding: 25px 25px;
    }

    .el-image-viewer__img {
        width: 120px;
        height: 120px;
    }

</style>
